<template>
  <ul class="addr-list">
    <li v-for="(value, key) in addr" :key="key">
      <span> {{ key }} </span>
      <ul class="act-addr">
        <li :class="{ 'is-active': item.id == isActive }" @click="handlerClick(item)" style="display: inline-block;"
          v-for="item in value" :key="item.id">{{
            item.name }}</li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      isActive: null
    }
  },
  props: {
    addr: {
      type: Object,
      require: true
    },
    name: {
      type: String,
      default: ''
    }
  },
  methods: {
    handlerClick(item) {
      this.isActive = item.id;
      this.$emit('change', item, this.name)
    }
  }
}
</script>

<style lang="scss" scoped>
ul.addr-list {
  font-size: 14px;

  &>li {
    padding: 10px 0;
    display: flex;
  }
}

ul {
  li span {
    flex-shrink: 0;
    margin-right: 15px;
    color: black;
    font-weight: 600;
  }

  &.act-addr {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    cursor: pointer;

    li {
      &:hover {
        color: var(--color-primary);
      }

      &.is-active {
        color: red !important;
      }
    }
  }
}
</style>